<template>
  <view class="page-container">
    <u-navbar back-icon-color="#FFF" :title="title" title-color="#FFF" :background="{
					background: '#00a0e9',
				}">
    </u-navbar>
    <view class="search-view">
      <u-search shape="square" input-align="center"
                @search="search"
                placeholder="搜索标题" v-model="keyword"
                :show-action="false"></u-search>
    </view>
    <div class="content">
      <scroll-view
          v-if="appointData.count"
          scroll-y class="progress-list"
          @scrolltolower="viewScroll"
          refresher-enabled
          :refresher-triggered="triggered"
          @refresherrefresh="refresh">
        <view class="progress-item" v-for="it in appointData.taskList" :key="it.ID" @click="openTask(it)">
          <p class="title">{{ it.TITLE }}</p>
          <p class="desc">
            <span class="from">来自：{{ it.USER_USERNAME }}</span>
            <span class="date">时间：{{ it.BEGINTIME }}</span>
          </p>
        </view>
      </scroll-view>
      <view v-else style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <u-empty text="列表为空" mode="list"></u-empty>
      </view>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      page: 1,
      triggered: false,
      title: '',
      wfid: ''
    }
  },
  computed: {
    appointData() {
      return this.$store.state.appointData
    }
  },
  methods: {
    search() {
      this.refresh()
    },
    async viewScroll(e) {
      this.triggered = true
      this.page++;
      await this.$store.dispatch('getAppointTaskList', {
        page: this.page,
        loadMore: true,
        query: this.keyword,
        wfid: this.wfid
      })
      this.triggered = false
    },
    async refresh() {
      this.triggered = true
      this.page = 1
      await this.$store.dispatch('getAppointTaskList', {
        page: this.page,
        query: this.keyword,
        wfid: this.wfid
      })
      this.triggered = false
    },
    openTask(it) {
      this.routeTo({
        link: 'approve',
        params: {
          id: it.ID,
          title: it.TITLE,
          openStatus: 8
        }
      })
    }
  },
  onLoad(options) {
    this.title = options.title
    this.wfid = options.wfid
    this.refresh()
    let that = this;
    uni.$on('update', function (data) {
      switch (data.payload) {
        case "刷新待办":
          that.refresh()
          break
      }
    })
  }
}
</script>

<style lang="less">
.search-view {
  padding: 20rpx;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 0;
  background: #FFF;

  .progress-list {
    height: 100%;
    flex: 1;

    .progress-item {

      border-bottom: 1px solid #acacac;
      padding: 28rpx;

      .title {
        font-size: 28rpx;
        color: #000;
        margin-bottom: 10rpx;
        word-break: break-all;
      }

      .desc {
        color: #999;
        font-size: 24rpx;

        margin-top: 20rpx;

        span:nth-child(1) {
          margin-right: 1em;
        }
      }

      .progress {
        background: #5489bb;
        color: #FFF;
        float: right;
        height: 48rpx;
        width: 104rpx;
        text-align: center;
        line-height: 48rpx;
        border-radius: 15rpx;
      }
    }
  }

}

</style>
